<template>
  <el-card class="box-card">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="店铺名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="店铺公告">
        <el-input type="textarea" v-model="form.bulletin" autosize></el-input>
      </el-form-item>

      <el-form-item label="店铺头像">
        <el-avatar
          shape="square"
          :size="300"
          :fit="fit"
          :src="form.avatar ? baseUrl + form.avatar : ''"
        ></el-avatar>
      </el-form-item>

      <el-form-item label="店铺图像">
        <el-upload
          :file-list="form.pics"
          action="http://127.0.0.1:5000/shop/upload/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="配送费">
        <el-input v-model="form.deliveryPrice"></el-input>
      </el-form-item>

      <el-form-item label="配送时间">
        <el-input v-model="form.deliveryTime"></el-input>
      </el-form-item>

      <el-form-item label="配送描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>

      <el-form-item label="店铺评分">
        <el-input v-model="form.score"></el-input>
      </el-form-item>

      <el-form-item label="销量">
        <el-input v-model="form.sellCount"></el-input>
      </el-form-item>

      <el-form-item label="活动">
        <el-checkbox-group v-model="form.supports">
          <el-checkbox
            v-for="(sup, index) in optionsGoods"
            :label="sup"
            :key="index"
            >{{ sup }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="营业时间">
        <el-date-picker
          format="HH:mm:ss"
          v-model="form.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="提交">
        <el-button type="primary" plain @click="handleSubmit"
          >修改信息</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getStoreInfo, editStore } from '@/req/storeAjax'
import { alterSuccess, alterError } from '@/util/msgTips'

export default {
  data () {
    return {
      form: {
        id: '',
        name: '',
        bulletin: '', // 公告
        avatar: '', // 店铺头像
        deliveryPrice: '',
        deliveryTime: '',
        description: '', // 配送描述
        score: '', // 配送评分
        sellCount: '', // 销量
        supports: [], // 活动
        pics: [], // 图像
        date: [] // 营业时间
      },
      dialogVisible: false,
      dialogImageUrl: '',
      fit: 'cover',
      baseUrl: 'http://127.0.0.1:5000/upload/shop/',

      optionsGoods: [
        '在线支付满28减5',
        'VC无限橙果汁全场8折',
        '单人精彩套餐',
        '特价饮品8折抢购',
        '特价饮品限时抢'
      ]
    }
  },

  created () {
    this.getStore()
  },
  methods: {
    // 获取商铺信息,回显
    async getStore () {
      const { data } = await getStoreInfo()
      data.date = data.date.map(el => {
        return new Date(el)
      })
      data.pics = data.pics.map(el => {
        const pic = {}
        pic.url = el
        return pic
      })
      this.form = data
    },

    // 确认修改
    async handleSubmit () {
      const pics = this.form.pics.map(el => {
        return el.url
      })
      const newForm = JSON.parse(JSON.stringify(this.form))
      newForm.pics = JSON.stringify(pics)
      newForm.date = JSON.stringify(newForm.date)
      newForm.supports = JSON.stringify(newForm.supports)

      const { code, msg } = await editStore(newForm)
      if (code === 0) {
        alterSuccess(msg)
      } else {
        alterError(msg)
      }
    },
    // 移除图片
    handleRemove (file) {
      this.form.pics = this.form.pics.filter(el => {
        return el.uid !== file.uid
      })
    },
    // 预览图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 下载
    handleDownload (file) {
      console.log(file)
    },

    handleAvatarSuccess (file) {
      this.form.pics.push({ url: this.baseUrl + file.imgUrl })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  margin-top: 30px;
}
.el-image {
  margin-right: 15px;
}
</style>
